<template>
  <el-dialog :close-on-click-modal="false"
             append-to-body
             :title="options.title"
             :visible.sync="visible"
             @close="cancel"
             :show="show"
             width="400px">
    <el-form ref="form"
             size="mini"
             :model="packageOpt"
             label-width="80px"
             @submit.native.prevent>
      <el-form-item label="包名称："
                    prop="bagname"
                    :rules="[{ required: true, message: '包名称不能为空'}]">
        <el-input v-model="packageOpt.bagname"></el-input>
      </el-form-item>
      <el-form-item label="包状态："
                    style="margin-top:20px;">
        <el-select v-model="packageOpt.showflag"
                   >
          <el-option label="公共"
                     value='-1'></el-option>
          <el-option label="私人不公开"
                     value='0'></el-option>
          <el-option label="私人公开"
                     value='1'></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer"
          class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary"
                 @click="addtag">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'addPackageDialog',
  inheritAttrs: false,
  props: {
    show: {
      type: Boolean,
      default: false
    },
    options: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      visible: this.show,
      packageOpt: {
        bagname: '',
        showflag: '-1'
      },
      userlist: {}
    }
  },
  methods: {
    addtag () {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.options.title === '修改') {
            this.$axios
              .post(
                '/userBag/editUserBag?userId=' +
                this.userlist.id +
                '&userBagId=' +
                this.options.row.id +
                '&bagName=' +
                this.packageOpt.bagname +
                '&showFlag=' +
                this.packageOpt.showflag
              )
              .then(res => {
                if (res.status === 200) {
                  if (res.data.message === '操作成功') {
                    this.$emit('update:show', false)
                    this.$refs.form.resetFields()
                    this.$emit('getNewPData')
                  }
                }
              })
          } else {
            this.$axios
              .post(
                '/userBag/addUserBag?userId=' +
                this.userlist.id +
                '&bagName=' +
                this.packageOpt.bagname +
                '&showFlag=' +
                this.packageOpt.showflag
              )
              .then(res => {
                if (res.status === 200) {
                  if (res.data.message === '成功') {
                    this.$emit('update:show', false)
                    this.$refs.form.resetFields()
                    this.$emit('getNewPData')
                  }
                }
              })
          }
        } else {
          return false
        }
      })
    },
    cancel () {
      this.$refs.form.resetFields()
      this.$emit('update:show', false)
    }
  },
  mounted () {
    if (JSON.parse(localStorage.getItem('userlist'))) {
      this.userlist = JSON.parse(localStorage.getItem('userlist'))
    }
  },
  watch: {
    show () {
      this.visible = this.show
    },
    options: {
      handler (val) {
        if (val.title === '修改') {
          this.packageOpt.bagname = val.row.bagname
        }
      },
      deep: true
    }
  }
}
</script>

<style scoped>
</style>
